<template>
    <div class="message">
        <!--yd-list theme="5">
            <yd-list-item v-for="art in article.list" :key="art.art_id">
                <img slot="img" :src="articleImage(art)"/>
                <span slot="title">{{ art.art_title }}</span>
                <p slot="other">{{ art.art_desc }}</p>
                <yd-list-other slot="other">
                    <div>
                        <yd-icon name="ucenter-outline" size=".2rem"></yd-icon><span> {{ art.art_reads || 0 }} </span>
                        <yd-icon name="good" size=".2rem"></yd-icon><span> {{ art.art_rates || 0 }}</span>
                    </div>
                    <div>{{ art.art_date }}</div>
                </yd-list-other>
            </yd-list-item>
        </yd-list-->

        <ul v-if="article.list && article.list.length" v-scroll-bottom="article.list">
        <transition-group name="list" tag="p">
            <li class="list-item" v-for="art in article.list" :key="art.art_id">
                <p class="time">
                    <span>{{ art.art_date.substring(0,10) }}</span>
                </p>
                <div class="card">
                    <h2>{{ art.art_title }}</h2>
                    <p class="tag">{{ art.art_date.substring(5,10)}}</p>
                    <img slot="img" :src="articleImage(art)"/>
                    <p>{{ art.art_desc }}</p>
                    <yd-cell-group>
                        <yd-cell-item arrow @click.native="showArticle(art)">
                            <span slot="left">
                                <yd-icon name="ucenter-outline" size=".2rem"></yd-icon><span> {{ art.art_reads || 0 }} </span>
                                <yd-icon name="good" size=".2rem"></yd-icon><span> {{ art.art_rates || 0 }}</span>
                            </span>
                            <span slot="right">查看全文</span>
                        </yd-cell-item>
                    </yd-cell-group>
                </div>
            </li>
        </transition-group>
        </ul>

        <div v-else>
            <p class="prompt">
                <span>没有内容</span>
            </p>
        </div>
    </div>
</template>

<script>
module.exports = {
    data () {
        return {
            channel: channelId(this.$route.path)
        }
    },
    created () {
        this.$store.dispatch('getArticle', this.channel)
    },
    computed: {
        article () {
            const list = this.$store.getters.articleList
            return list.channel == this.channel ? list : {}
        }
    },
    methods: {
        articleImage (art) {
            if(art.art_face) {
                return art.art_face
            } else {
                return 'assets/img/default/announce.jpg'
            }
        },
        showArticle (art) {
            this.$router.push({name:'article',params:{channel: this.channel, id: art.art_id}})
        }
    },
    directives: {
        'scroll-bottom' (el) {
            Vue.nextTick(() => {
                document.querySelector('#scrollView').scrollTop = el.clientHeight;
            });
        }
    }
}
</script>

<style scoped>
.message {
    padding: 0rem .15rem;
    overflow-y: scroll;
}
    .prompt {
        margin: .1rem 0;
        text-align: center;
    }
    .prompt > span {
            display: inline-block;
            padding: 0 .18rem;
            font-size: .12rem;
            color: #fff;
            border-radius: .1rem;
            background-color: #dcdcdc;
        }
    li {
        margin-bottom: .15rem;
    }
    .time {
        margin: .1rem 0;
        text-align: center;
    }
    .time > span {
            display: inline-block;
            padding: 0 .18rem;
            font-size: .12rem;
            color: #fff;
            border-radius: .1rem;
            background-color: #dcdcdc;
        }
.card {
    background-color: #fff;
    margin: .2rem;
    padding: .3rem;
}
.card > img {
    width: 100%;
    max-height: 3rem;
    margin-top: .1rem;
    margin-bottom: .1rem;
    object-fit: cover;
}
.card > h2 {
    font-size: .38rem;
    font-weight: normal;
}
.card > p {
    font-size: .28rem;
}
.card > .tag {
    font-size: .28rem;
    float: right;
    color: #666;
}
.list-item {
    display: block;
    min-height: 1rem;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}

</style>